<template>
	<view>
		<view class="header">
			<uni-row>
				<uni-col :span="12" class="left">
					<image :src="loginUserInfo.avatar">
					</image>
				</uni-col>
				<uni-col :span="12" class="left">
					<view class="io-q">
						<text>昵称：{{ loginUserInfo.name }}</text>
					</view>
					<view class="vi-r">
						<text>账号：{{ loginUserInfo.username }}</text>
					</view>
				</uni-col>
			</uni-row>
			<view>
				<uni-grid  :column="4">
					<uni-grid-item v-for="item in tableData" class="opder" @click="change">
						<uni-icons class="uio" @click="change" :type="item.icon" :size="30" color="#777" />
						<text class="text" @click="change">{{ item.title }}</text>
					</uni-grid-item>
					<!-- <uni-grid-item >
						<uni-icons class="uio" type="gear-filled" :size="30" color="#777" />
						<text class="text">设置</text>
					</uni-grid-item>
					<uni-grid-item >
						<uni-icons class="uio" type="heart" :size="30" color="#777" />
						<text class="text">收藏</text>
					</uni-grid-item>
					<uni-grid-item >
						<uni-icons class="uio" type="location-filled" :size="30" color="#777" />
						<text class="text">收货地址</text>
					</uni-grid-item>
					<uni-grid-item >
						<uni-icons class="uio" type="hand-up" :size="30" color="#777" />
						<text class="text">我的评价</text>
					</uni-grid-item>
					<uni-grid-item >
						<uni-icons class="uio" type="person-filled" :size="30" color="#777" />
						<text class="text">个人主页</text>
					</uni-grid-item> -->
				</uni-grid>
			</view>
			<view class="bar">
				<uni-section type="line" class="hideOnPc">
					<view class="example-body box">
						<button class="button popup-warn" @click="doExit"><text
								class="button-text warn-text"></text>退出登录</button>
					</view>
				</uni-section>
			</view>

		</view>
	</view>
</template>


<script setup>
	
	import  {API_HOST}  from  '/config/const.js'

	const  tableData = ref([
		{
			title:"我的订单",
			icon:"home",
			index:0
		},
		{
			title:"设置",
			icon:"gear-filled",
			index:0
		},
		{
			title:"收藏",
			icon:"heart",
			index:0
		},
		{
			title:"收货地址",
			icon:"location-filled",
			index:0
		},
		{
			title:"我的评价",
			icon:"hand-up",
			index:0
		},
		{
			title:"我的评价",
			icon:"person-filled",
			index:0
		}
	])
	
	// const change =(tableData)=>{
	// 	switch(tableData.detail.index){
			
	// 	}
	// }
	
	import {
			onMounted,
			ref
		} from 'vue';
	
		import {
			onShow,
		} from "@dcloudio/uni-app";
		
		
		 onShow(()=>{
			 isLogin();
		 })
	
		onMounted(() => {
			//判断是否登录
			init()
	
		})
		const isLogin = () => {
			if (!uni.getStorageSync("loginUser")) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	
		const loginUserInfo = ref({
			id: "",
			name: "",
			username: "",
			avatar: ""
		})
	
		//初始化个人信息
		const init = () => {
			const info = uni.getStorageSync("loginUser");
			if (info) {
				const object = JSON.parse(info)
				loginUserInfo.value.id = object.id
				loginUserInfo.value.name = object.name
				loginUserInfo.value.username = object.username
				loginUserInfo.value.avatar = object.avatar
			}
		}
	
		const doExit = () => {
			uni.removeStorageSync("loginUser")
			uni.showModal({
				title: '提示',
				content: '是否退出',
				confirmText: '确定',
				cancelText: '取消',
				success: res => {
					if (res.confirm) {
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 500)
					} else if (res.cancel) {
						return
					}
				}
			});
			init()
		}
		
		//点击跳转
		const change =()=>{
			uni.redirectTo({
				url:'/pages/orderdetail/orderdetail'
			})
		}
	
</script>

<style scoped>
	.header {
		height: 400rpx;
		background-color: azure;
	}

	.left {
		display: flex;
		justify-content: center;
		height: 400rpx;
		align-items: center;
		align-content: baseline;
	}

	.left image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 300rpx;
	}

	.bar button {
		width: 230rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: darkseagreen
	}

	.io-q text {
		font-weight: bold;
		margin-top: -100rpx;
		position: absolute;
		right: 200rpx;
	}

	.vi-r text {
		font-size: 0.8rpx;
		position: absolute;
		left: 400rpx;
	}
	
	
	
	.uio{
				width: 200rpx;
				height: 150rpx;
				display: flex;
				margin-bottom: -20rpx;
				margin-left: 20rpx;
				padding: 30rpx;
	}
	.text{
				font-size: 36rpx;
				margin-top: 6rpx;
				margin-left: 30rpx;
				margin-bottom: 30rpx;
	}
</style>